<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                <el-form-item label="NFT名称" prop="nftName">
                  <el-input v-model="ruleForm.nftName" placeholder="请填写NFT名称" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="NFT描述" prop="nftDescription">
                  <el-input v-model="ruleForm.nftDescription" type="textarea" placeholder="NFT描述" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="关联产业类型" prop="nftTypeEnum">
                  <el-select v-model="ruleForm.nftTypeEnum" placeholder="选择产业类型" style="width: 600px;">
                      <el-option  label="城市地标" value="1"> </el-option>
                      <el-option  label="广告位" value="2"> </el-option>
                      <el-option  label="道具" value="3"> </el-option>
                      <el-option  label="其它" value="5"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="关联产业ID" prop="relationId">
                   <el-input v-model="ruleForm.relationId" placeholder="请填写关联产业ID" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="NFT图片" prop="nftImage">
                  <div class="upfileTips" style="display:flex">
                    <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.nftImage" type="img"/>
                    <p>支持JPG、JFPG、PNG等图片格式，文件大小控制在2M以内</p>
                  </div>
                </el-form-item>
                
                <el-form-item>
                    <template>
                        <template>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>

            </el-form>
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  add_forget,
  get_card_detail,
 edit_card
} from '@/api/collext'
import uploadFile from '@/components/public/uploadFile.vue'
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
export default {
  name: '',
  components:{
    uploadFile,
    myBack,
    //landmarkSelect
  },
  data() {
    return {
      ruleForm: {
        nftDescription:'',
        nftImage:'',
        nftName:'',
        nftTypeEnum:'1',
        relationId:''
      },
      rules: {},
      details:'',
      id:'',
      onlyLook:'',
      btnLoading:false
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_card_detail(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)
      }
    }
  },
  methods: {
    // 确定
    save(formName) {
      if(!this.ruleForm.nftName){
        return this.$message.warning('请输入NFT名称')
      }else if(!this.ruleForm.nftDescription){
        return this.$message.warning('请输入NFT描述')
      }else if(!this.ruleForm.nftTypeEnum){
        return this.$message.warning('请选择关联产业类型')
      }else if(!this.ruleForm.relationId){
        return this.$message.warning('请输入关联产业ID')
      }else if(!this.ruleForm.nftImage){
        return this.$message.warning('请上传NFT图片')
      }
      
      //this.btnLoading = true
      if(this.id){  // 编
          edit_card({cardId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("修改失败")
            }
            this.btnLoading = false
          })
      }else{  //新增
          // 获取u3d地图id
         // this.ruleForm.relationU3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')

          add_forget(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('创建成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              this.$message.error(res.message)
            }
            this.btnLoading = false
          })
      }
      
    },
  }
}
</script>

<style lang="scss" scoped>
  .colFlex{
  display: flex;
  .cfItem{
    flex: 1;
    padding: 0 0 0 10px;
  }
  &+.colFlex{
    margin: 10px 0 0 0;
  }
}
.addBtnBox{
  padding: 10px 0 0 0;
}
.upfileTips{
  display: flex;
  p{
    flex: 1;
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center; 
    line-height: 24px;
  }
}
</style>

<style lang="scss">
  .colFlex textarea{
    height: 148px !important;
  }
</style>


